<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="item in list" class="swiper__item" @click="gotoDetail(item.id)">
					<view class="item__title">
						{{item.title}}
					</view>
					<image class="item__iamge" :src="item.coverImage" mode="aspectFit" @error="handleErrorImg(item)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="articl__list">
			<blogItem :item="i" v-for="i in list" class="article__item"></blogItem>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js'
	export default {
		onLoad() {
			this.getBlogList();
		},
		onTabItemTap() {
			this.getBlogList();
		},
		data() {
			return {
				list: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			};
		},
		methods: {
			getBlogList() {
				request.httpRequest({
					url: 'wx/getBlogList',
					method: 'POST'
				}, {
					pageNumber: 1,
					pageSize: 5,
					sortOrder: 'asc',
					title: '',
					status: '1',
					recommended: true
				}).then(res => {
					this.list = res.rows
				})
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '/pages/list/detail?id=' + id
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			handleErrorImg(e) {
				console.log(e)
				e.coverImage = '../../static/404.png'
			}
		}
	}
</script>

<style lang="scss">
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		margin-bottom: 10rpx;
	}

	.swiper {
		height: 300rpx;

		.swiper__item {

			.item__title {
				text-align: center;
				color: #42b983;
				margin: 10rpx;
			}

			.item__iamge {
				width: 750rpx;
				height: 300rpx;
			}
		}
	}
</style>